<template>
  <div class="page" style="position:relative;">
    <div class="layui-fluid">
      <div class="pagetop">
        <Search :seadate="searchArr"></Search>
      </div>
      <div class="layui-card-body">
        <Tables
          :fdate="pdate"
          :result="res"
          height="430"
          :totalCount="totalRows"
          :pageNumber="curindex"
          :fbtn="btn"
        ></Tables>
      </div>
      <div class="xuanfu" v-show="isshow == 1" style="display:none;">
        <div class="layui-card-body">
          <div class="layui-form" lay-filter>
            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label" style="font-weight:bold;font-size:15px;">活动设置</label>
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">ID</label>
                <div class="layui-input-inline">
                  <input
                    type="text"
                    name
                    disabled="disabled"
                    v-model="itemData.targetId"
                    placeholder
                    autocomplete="off"
                    class="layui-input"
                  />
                </div>
              </div>
            </div>

            <div class="layui-form-item">
              <div class="layui-inline">
                <label class="layui-form-label">活动名称</label>
                <div class="layui-input-inline">
                  <input
                    type="text"
                    name
                    disabled="disabled"
                    v-model="name"
                    placeholder
                    autocomplete="off"
                    class="layui-input"
                    maxlength="11"
                  />
                </div>
              </div>
            </div>


             <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">标题</label>
                    <div class="layui-input-inline">
                      <input
                        type="text"
                        name='title'
                        v-model="itemData.title"
                        placeholder="请输入标题"
                        autocomplete="off"
                        class="layui-input"
                      />
                    </div>
                  </div>
                </div>

               <div class="layui-form-item">
                  <div class="layui-inline">
                    <label class="layui-form-label">Logo</label>
                    <div class="layui-input-inline" style="width: 180px;">
                      <img
                        id="img"
                        :src="
                          itemData.logo
                            ? itemData.logo
                            : require('@/assets/zwyl.jpg')
                        "
                        style="width:100px;height:100px;"
                      />
                    </div>
                    <div class="layui-form-mid layui-word-aux">有图片则回显图片，无图片则自动使用默认图片</div>
                  </div>
                </div>



            <div class="layui-form-item">
              <div class="layui-input-block" style="top:10px;left:100px;">
                <button class="layui-btn" @click="save()" lay-submit lay-filter="formDemo">立即提交</button>
                <button
                  class="layui-btn layui-btn-primary"
                  @click="quxiao()"
                  lay-submit
                  lay-filter="formDemo"
                >取消</button>
              </div>
            </div>
            <!--// -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Tables from "../common/tables.vue";
import Search from "../common/search.vue";
export default {
  name: "newshyadd",
  components: { Tables, Search },
  data() {
    return {
      pdate: [], //表头
      res: "", //内容
      totalRows: "", //总数量
      curindex: 1, //页数
      btn: [], //按钮
      searchArr: [], //搜索
      isShow: false,
      seapram: "",
      isshow: 0,

        name:"",
      itemData: {
          logo:'',
          news:{id:''},
          title:'',
          targetId:'',
          targetType:2,
      }, //商品回选
    };
  },
  mounted() {
    this.getdate();
    this.getsearch();
    var _this = this
    layui.use("upload", function () {
      var upload = layui.upload;
      var uploadInst = upload.render({
        elem: "#layuiadmin-upload-useradmin", //绑定元素
        data: {
          type: 2,
        },
        url:imguploadurl, //上传接口
        done: function (res) {
          layer.msg("上传成功");
          _this.itemData.logo = res.msg;
        },
        error: function () {
          layer.msg("上传失败");
        },
      });
    });
  },
  methods: {
    getdate: function () {
      var _this = this;
      _this.itemData.news.id = this.$route.query.id
      var url = "/verify/aapi/v1.9/project/page/distanceTime";
      if (_this.seapram) {
        var dates = {
          size: pageSize,
          page: _this.curindex,
          //sort:'createAt,DESC',
           "ascription.equals": "ADMIN"
        };
        var res = _this.seapram;
        for (var i = 0; i < res.length; i++) {
          dates[res[i].key+'.equals'] = res[i].val;
        }
      } else {
        var dates = {
          size: pageSize,
          page: _this.curindex,
          //sort:'createAt,DESC',
          "ascription.equals": "ADMIN"
        };
      }
      //alert(url+"//"+JSON.stringify(dates))
      ajaxRequest(url, "GET", "json", dates, function (ret, err) {
        //alert(url+"//"+JSON.stringify(ret))
        var arr = [];
        arr[0] = [
          { field: "id", title: "活动ID" },
          { field: "name", title: "活动名称" },
          {
              field: "logo",
              title: "活动图片",
              templet:
                '<div><img src="{{d.logo}}" style="display: inline-block; height: 100%;"></div>',
            },
            { field: "saleCount", title: "活动销量" },
          {
            field: "right",
            title: "操作",
            width: "120",
            fixed: "right",
            templet: function (d) {
              var str =
                '<a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="detail">选取</a>';
              return str;
            },
          },
        ];
        _this.pdate = arr;
        _this.res = ret.data.list; //res1;
        _this.totalRows = ret.data.totalRows;
        _this.curindex = ret.data.page + 1;
      });
    },
    getsearch: function () {
      var arr = [{ field: "name", title: "活动名称", type: "input" }];
      this.searchArr = arr;
    },
    page: function (index, obj) {
      //alert(JSON,stringify(obj))
      this.curindex = index;
      this.getdate();
    },
    sousuo: function (pram) {
      //alert(JSON.stringify(pram))
      this.seapram = pram;
      this.res = "";
      this.totalRows = "";
      this.curindex = 1;
      this.getdate();
    },
    addData: function () {
      // this.$router.push({name:'khadd'})
    },
    detailInfo: function (data) {
      var _this = this;
      var id = data.id;
      _this.isshow = 1;
      var url = "/verify/aapi/v1.9/project/" + id; //回选商品
      //var url="/retail/bapi/v1.9/share-bonus/"+_this.id  //回选设置信息
      ajaxRequest(url, "GET", "json", "", function (ret, err) {
        _this.itemData.targetId = ret.data.id;
        _this.name = ret.data.name;
        _this.itemData.logo = ret.data.logo;
      });
    },
    quxiao: function () {
      var _this = this;
      //_this.itemData={};
      _this.isshow = 0;
    },
    save: function () {
      var _this = this;
      var dates = _this.itemData;
      var url = "/advert/aapi/v1.9/news-target";
      // console.log(JSON.stringify(dates));
      ajaxRequest(url, 'POST', "json", dates, function(ret, err) {
        layer.msg("操作成功");
        setTimeout(function() {
          var index = parent.layer.getFrameIndex(window.name);
          parent.layer.close(index);
          parent.location.reload();
        }, 1000);
      });
    },
    screens: function () {
      return screen();
    },
  },
  updated: function () {
    this.isShow = true;
    var _this = this;
    layui.use("form", function () {
      var form = layui.form;
      form.render();
    });
  },
};
</script>
<style scoped>
/**/
.xuanfu {
  background-color: #ffffff;
  width: 80%;
  font-size: 15px;
  position: absolute;
  left: 10%;
  top: 20px;
  z-index: 1;
}
</style>